<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { getMessageList } from '@/apis/message'
  import { ref, onMounted } from 'vue'
  import { toast } from '@/utils/utils'

  const list = ref([]) // 列表数据
  const pages = ref(0) // 总页码
  const page = ref(1) // 控制滚动条让页码加加，来发请求

  const loadData = async () => {
    const res = await getMessageList({
      contentType: 200,
      page: page.value,
      pageSize: 5,
    })
    list.value.push(...(res.data.items || []))
    pages.value = res.data.pages
  }

  onMounted(() => {
    loadData()
  })

  //滚动条加载数据
  const onScrollToLower = () => {
    if (page.value >= pages.value) return toast('没有更多了')
    page.value++
    loadData()
  }

  //下拉刷新
  const refreshing = ref(false)
  const onRefresh = async () => {
    refreshing.value = true
    // 刷新：重新加载第一页的数据，将现有的数据清空
    page.value = 1
    list.value = []
    try {
      await loadData()
    } finally {
      refreshing.value = false
    }
  }
</script>
<template>
  <scroll-view
    class="scroll-view"
    :refresher-triggered="refreshing"
    refresher-enabled
    scroll-y
    @scrolltolower="onScrollToLower"
    @refresherrefresh="onRefresh"
  >
    <view class="scroll-view-wrapper">
      <view class="message-action">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-list v-for="v of list" :key="v.id" :border="false">
        <uni-list-item
          to="/subpkg_message/content/index"
          ellipsis="1"
          title="在营车辆年检通知，为保障车辆能在营车辆年检通知，为保障车辆能够"
          rightText="05-06 06:16"
        >
          <template v-slot:header>
            <text :class="{ dot: v.isRead === 0 }"></text>
          </template>
        </uni-list-item>
      </uni-list>
      <view v-if="list.length === 0" class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
